{include file="common:theader" /}
{include file="common:tside" /}
<style>
  .form-control[disabled] {
    background-color: white;
  }

  .header {
    background: #fff;
    width: 100%;
    height: 80px;
    line-height: 80px;
    padding-left: 40px;
    font-size: 18px;
    font-weight: 600;
    margin-top: 20px;
  }

  .content {
    background: #fff;
    width: 100%;
    padding: 30px 40px;
    margin-top: 20px;
  }

  .title {
    font-size: 18px;
    font-weight: 600;

  }

  .tit {
    margin-right: 15px;
  }

  .cla {
    font-size: 16px;
    font-weight: 200;
  }

  .swiper-container {
    width: 500px;
    height: 300px;
  }

  .pc-slide {
    width: 500px;
    /* margin: 0 auto; */
    margin-top: 30px;
  }

  .view .swiper-container {
    width: 500px;
    height: 300px;
  }

  .view .arrow-left {
    background: url(/web/img/index_tab_l.png) no-repeat left top;
    position: absolute;
    left: 10px;
    top: 50%;
    margin-top: -25px;
    width: 28px;
    height: 51px;
    z-index: 10;
  }

  .view .arrow-right {
    background: url(/web/img/index_tab_r.png) no-repeat left bottom;
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -25px;
    width: 28px;
    height: 51px;
    z-index: 10;
  }

  .preview {
    width: 100%;
    margin-top: 10px;
    position: relative;
  }

  .preview .swiper-container {
    width: 430px;
    height: 82px;
    margin-left: 35px;
  }

  .preview .swiper-slide {
    width: 145px;
    height: 82px;
    cursor: pointer;
  }

  .preview .swiper-slide video {
    width: 87px;
    height: 82px;
  }

  .preview .slide6 {
    width: 82px;
  }

  .preview .arrow-left {
    background: url(/web/img/feel3.png) no-repeat left top;
    position: absolute;
    left: 10px;
    top: 50%;
    margin-top: -9px;
    width: 9px;
    height: 18px;
    z-index: 10;
  }

  .preview .arrow-right {
    background: url(/web/img/feel4.png) no-repeat left bottom;
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -9px;
    width: 9px;
    height: 18px;
    z-index: 10;
  }

  .preview img {
    padding: 1px;
  }

  .preview .active-nav img {
    padding: 0;
    border: 1px solid #F00;
  }

  .con_video {
    width: 500px;
    height: 300px;
  }

  .coure {
    width: 100%;
    margin-top: 30px;
    display: flex;
    align-items: center;
    margin-bottom: 30px;
  }

  .coureTie {
    font-weight: 600;

  }

  .pdfBtn {
    padding: 8px;
    color: #2437FE;
    background: #CCEDFC;
    border-radius: 6px;
    /*text-decoration: underline;*/
    margin-right: 8px;
  }

  .coureDetails {
    padding-top: 30px;
    border-top: 3px solid #EDF1F5;
    padding-bottom: 100px;
  }

  .boxs {
    margin-top: 30px;
    display: flex;
  }

  .label {
    margin-right: 20px;
    color: #000;
    width: 80px;
  }

  #pdf_box .pdfobject {
    width: 800px !important;
    height: 600px !important;
    margin: 0 auto !important;
  }

  #pdf_box {
    margin: 0 auto;
  }

  .mack {
    background-color: #000;
    opacity: 0.5;
    position: fixed;
    z-index: 111;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
  }

  #mp4_box {
    margin: 0 auto;
  }

  video {
    width: 500px
  }

  #page-wrapper .box {
    width: auto;
    height: auto;
    position: absolute;
    left: 0;
    top: 60px;
    display: flex;
    justify-content: center;
    margin-left: 230px;
    padding-right: 270px;
    width: 100%;
  }
  @media (min-width: 768px)  {
    .hide-sidebar #page-wrapper .box{
      padding-left: 0;
      margin-left: 230px;
  }
  }

  @media (min-width: 1170px)  {
    .hide-sidebar #page-wrapper .box{
      margin-left: 0;
      padding-right: 0;
  }
  }
  @media  (min-width: 1170px) {
   .hide-sidebar #page-wrapper .box #iframe{
      width: calc(100vw - 100px);
     
    }
  }
  @media (min-width: 1400px) {
    #page-wrapper .box #iframe{
      width: calc(100vw - 260px - 65px);
    }
  }

  .box-x{
    position: fixed;
    top: 70px;
    right: 10px;
    font-size: 18px;
    z-index: 1111100;
    color: #000;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #fff;
    text-align: center;
    line-height: 30px;
  }

  #iframe {
    display: none;
    height: 100vh;
  }
  #container{
    position: absolute;
    padding: 0px;
    margin: 0px;
    width: 100vw;
    height: 100vh;
    left: 0px;
    top: 0px;
  }
  .web-office-iframe{
    width: 100% !important;
    height: 100vh !important;
  }
</style>
<div id="page-wrapper">
  <div class="container-fluid" id="m_main">
    <div class="header">
      | 课件详情
    </div>
    <div class="content">
      <div class="title"> <span class="tit">{$courseware.name}<span> </span>{$courseware_course_name3}</span> <span
          class="cla">{$courseware_course_name1} / {$courseware_course_name2}</span></div>
      {present name="$courseware.video.0.mf"}
      <div class="pc-slide">
        <div class="view">
          <div class="swiper-container">
            <!-- <a class="arrow-left" href="#"></a>
            <a class="arrow-right" href="#"></a> -->
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <video src="{$courseware.video.0.mf}" controls="controls" class="con_video">
                  <source src="{$courseware.video.0.mf}" type="video/mp4">
                </video>
              </div>
            </div>
          </div>
        </div>
        <div class="preview">
          <a class="arrow-left" href="#"></a>
          <a class="arrow-right" href="#"></a>
          <div class="swiper-container">
            <div class="swiper-wrapper">
              {foreach $courseware.video as $key => $video}
              <div class="swiper-slide {if $key==0}active-nav{/if}" onclick="activenav(this)" data-video="{$video.mf}">
                <img src="{$video.mf}?x-oss-process=video/snapshot,t_10000,m_fast" height="100%" alt="">
              </div>
              {/foreach}
            </div>
          </div>
        </div>
      </div>
      {/present}

      <div class="coure">
        <div class="coureTie">课程内容：</div>
        {foreach $courseware.pdf as $p}
        <div class="pdfBtn"><a style="text-decoration: underline;" href="javascript:;"
            @click="getPreviewInfo('{$p.mf}')">{$p.mf_name}</a>
          {if $courseware.can_download==1}&nbsp;&nbsp;&nbsp;<a style="text-decoration: underline;"
            href="{$p.mf}">下载</a>{/if}</div>
        {/foreach}
      </div>

      <div class="coureDetails">
        <div class="title">课程介绍</div>
        <div class="boxs">
          <span class="label">主要知识点:</span>
          <span>{$courseware.main_point}</span>
        </div>
        <div class="boxs">
          <span class="label">教学目的:</span>
          <span>{$courseware.teaching_aims}</span>
        </div>
      </div>
    </div>
    <!--遮罩层防止embed曾右键-->
    <div class="box_mask" v-if="url" style="position:absolute; top: 85px; left:50%;overflow: scroll-y; z-index:1000;width: 100%;height: 200px;transform: translate(-50%, 0);"></div>
    <div class="box" v-if="url" style="overflow: scroll-y; z-index:999;"  @click="closeOnline">
      <!-- <button type="button" class="fcbtn btn btn-primary btn-outline btn-1b w-100" style="margin-bottom: 20px; float: right" @click="closeOnline">关闭</button> -->
      <!-- <div v-if="type == 'pdf'" id="pdf_box"></div> -->
    
      <iframe v-if="type == 'pdf'"
        :src="'https://view.xdocin.com/xdoc?_xdoc=' + urlencode+'&_saveable=false&_printable=false&_copyable=false&_toolbar=false'"
        width='100%' height='100%' frameborder='1'></iframe>
      <div v-else-if="type == 'mp4'" id="mp4_box">
        <video controls controlslist="nodownload">
          <source :src="url" type="video/mp4">
        </video>
      </div>

      
      <!-- <iframe v-else :src="'https://view.officeapps.live.com/op/view.aspx?src=' + url" width='100%' height='100%' frameborder='1'></iframe> -->
      <!-- <iframe v-else
        :src="'https://view.xdocin.com/xdoc?_xdoc=' + urlencode+'&_saveable=false&_printable=false&_copyable=false&_toolbar=false'"
        width='100%' height='100%' frameborder='1'></iframe> -->
    </div>
    <!-- 遮罩层 -->
    <!-- <div class="mack" v-if='fage' @click="closeOnline"></div> -->
    <div id="container" v-show='iframeShow'>
      <div class="box-x" @click='iframeShow=false'>X</div>
    </div>
  </div>
</div>
{include file="common:js" /}
{include file="common:footer" /}
<link rel="stylesheet" href="/web/css/swiper-3.4.2.min.css">
<!-- <script src="/web/js/jquery-3.2.1.min.js"></script> -->
<script src="/web/js/swiper-3.4.2.jquery.min.js"></script>
<script type="text/javascript" src="/web/js/pdf.js"></script>
<script src="https://g.alicdn.com/IMM/office-js/1.1.9/aliyun-web-office-sdk.min.js"></script>
<script>         

  // 禁止右键查看
  window.document.oncontextmenu = function () {
    return false;
  }
  //轮播图
  var viewSwiper = new Swiper('.view .swiper-container', {
    onSlideChangeStart: function () {
      updateNavPosition()
    }
  })

  $('.view .arrow-left,.preview .arrow-left').on('click', function (e) {
    e.preventDefault()

    console.log('11111')
    if (viewSwiper.activeIndex == 0) {
      viewSwiper.slideTo(viewSwiper.slides.length - 1, 1000);
      return
    }
    viewSwiper.slidePrev()

  })
  $('.view .arrow-right,.preview .arrow-right').on('click', function (e) {
    e.preventDefault()
    if (viewSwiper.activeIndex == viewSwiper.slides.length - 1) {
      viewSwiper.slideTo(0, 1000);
      return
    }
    viewSwiper.slideNext()
  })

  var previewSwiper = new Swiper('.preview .swiper-container', {
    //visibilityFullFit: true,
    slidesPerView: 'auto',
    allowTouchMove: false,
    onTap: function () {
      viewSwiper.slideTo(previewSwiper.clickedIndex)
    }
  })

  function updateNavPosition() {
    $('.preview .active-nav').removeClass('active-nav')
    var activeNav = $('.preview .swiper-slide').eq(viewSwiper.activeIndex).addClass('active-nav')
    if (!activeNav.hasClass('swiper-slide-visible')) {
      if (activeNav.index() > previewSwiper.activeIndex) {
        var thumbsPerNav = Math.floor(previewSwiper.width / activeNav.width()) - 1
        previewSwiper.slideTo(activeNav.index() - thumbsPerNav)
      } else {
        previewSwiper.slideTo(activeNav.index())
      }
    }
  }

  function activenav(e) {

    // $('.preview .swiper-slide').on('click',function (e) {
    $('.preview .active-nav').removeClass('active-nav')
    $(e).addClass('active-nav')
    $('.con_video').attr('src', $(e).attr('data-video'))
    //})
  }
</script>

<script type="text/javascript">
  var vm = new Vue({
    el: '#m_main',
    data() {
      return {
        url: "",
        urlencode: "",
        type: "",
        fage: false,
        iframeShow:false,
      }
    },
    mounted() {
    },
    methods: {
      lookOnline(e) {
        // this.iframeShow=true;
        // $('#iframe').show();
        // this.url = e;
        // this.urlencode = encodeURIComponent(e)
        // this.type = this.getFileType(e);
        // this.fage = true;
        // if (this.type == 'pdf') {
        //   var options = {
        //     height: "550px",
        //     pdfOpenParams: {
        //       view: 'FitV',
        //       page: '0',
        //       scrollbars: '0',
        //       toolbar: '1',
        //       statusbar: '0',
        //     },
        //     name: "mans",
        //     fallbackLink: "<p>您的浏览器暂不支持此pdf，请下载最新的浏览器</p>"
        //   };
        //   this.$nextTick(function () {
        //     PDFObject.embed(this.url, "#pdf_box", options);
        //   })
        // }
      },
      closeOnline() {
        this.url = "";
        this.fage = !this.fage
      },
      getFileType(filePath) {
        var startIndex = filePath.lastIndexOf(".");
        if (startIndex != -1)
          return filePath.substring(startIndex + 1, filePath.length).toLowerCase();
        else return "";
      },
      getPreviewInfo(e) {
        axios.post('/dboard/publics/getPreviewInfo', {id: e},{headers: {'X-Requested-with':'XMLHttpRequest'}}).then(res => {
          // console.log(res);
          if(res.data.Code == 0){
            let instance = aliyun.config({
              mount: document.querySelector('#container'),
              url: res.data.Data.previewURL //设置文档预览URL地址。
            })

            // 设置AccessToken。
            instance.setToken({
              token: res.data.Data.accessToken,
              timeout: 60 * 60 * 1000,
            }) 
            this.iframeShow=true;
          }else{
            alert(res.data.Msg)
          }
        }).catch(err => {
          console.log(err);
        })
      }
    }
  })
</script>